<style>
    .attr-table input {
        padding: 0;
        text-align: center;
    }
    .attr-table thead th {
        text-align: center;
    }
    .attr-table tbody td {
        text-align: center;
        vertical-align: middle!important;
    }
    .attr-table .disabled td, .attr-table .disabled td input {
        background: #F7F7F7;
        color: #b1b1b1;
    }
    .attr-table .sku-img {
        width: 40px; height: 40px;
        cursor: pointer;
        color: #b1b1b1;
        display: inline-block;
        border: 1px solid #ddd;
    }
    .attr-table .sku-img img {
        width: 40px; height: 40px;
    }
</style>
<div class="form-group">
    <label class="control-label col-xs-12 col-sm-2">库存/规格</label>
    <div class="col-xs-12 col-sm-8" id="app" v-cloak>
        <div style="margin-bottom: 5px;">
            <input type="text" class="form-control" style="width: 100px" ref="attr-group-name" @keyup.enter="addRow" placeholder="输入规格名称">
            <a class="btn btn-sm btn-primary" id="btn-add-group" @click="addRow">添加规格</a>
        </div>
        <div>
            <div class="panel panel-default" v-for="(item, i) in attrGroups" :key="i">
                <header class="panel-heading">
                    <span class="pointer color-disabled" @click="removeGroup(i)">X</span>
                    <b>{{item}}</b>
                </header>
                <div class="row" style="margin: 5px 0;">
                    <div class="col-md-6 col-sm-6 col-xs-6">
                        <div class="input-group">
                            <input type="text" class="form-control" @keyup.enter="addChild(i)" :ref="'attr-item-name-' + i">
                            <span class="input-group-addon pointer" @click="addChild(i)">添加</span>
                        </div>
                    </div>
                    <div class="col-md-6 col-sm-6 col-xs-6" style="padding: 5px 0;">
                        <span class="tag pointer" title="移除" v-for="(v, j) in attrItems[i]" :key="j" @click="removeChild(i, j)">{{v}}</span>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row" v-show="productSkus.length">
            <div class="col-md-12">
                <table class="table table-bordered attr-table">
                    <thead>
                        <tr>
                            <th v-for="(item, i) in attrGroups" :key="i">
                                {{item}}
                                <input type="text" name="attrs[group][]" v-show="false" v-model="item" />
                            </th>
                            <th width="80">原价</th>
                            <th width="80">现价</th>
                            <th width="80">库存</th>
                            <th width="80">重量</th>
                            <th width="80">编码</th>
                            <th width="80">图片</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item, i) in productSkus" :key="i">
                            <td v-for="(v, j) in item" :key="j">
                                {{v}}
                            </td>
                            <td width="80">
                                <input type="text" name="attrs[market_price][]" class="input-sm form-control attr-market_price">
                            </td>
                            <td width="80">
                                <input type="text" name="attrs[price][]" class="input-sm form-control attr-price">
                            </td>
                            <td width="80"><input type="text" name="attrs[stock][]" class="input-sm form-control attr-stock"></td>
                            <td width="80"><input type="text" name="attrs[weight][]" class="input-sm form-control attr-weight"></td>
                            <td width="80"><input type="text" name="attrs[sn][]" class="input-sm form-control attr-sn"></td>
                            <td width="80">
                                <input type="hidden" name="attrs[image][]" :id="'c-attr-image-' + i">
                                <div class="sku-img" @click="upimage(i)">
                                    <img v-if="skus[i] && skus[i].image" :src="skus[i] && skus[i].image" :id="'img-attr-image-' + i">
                                    <span v-else>上传图片</span>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td align="center" v-if="attrGroups.length" :colspan="productSkus[0] && productSkus[0].length">批量设置</td>
                            <td align="center">
                                <div class="input-group ">
                                    <input type="text" class="form-control no-padding text-center" id="batch-market_price">
                                    <span class="input-group-addon pointer" onclick="batchSetAttrs('market_price')">设置</span>
                                </div>
                            </td>
                            <td align="center">
                                <div class="input-group ">
                                    <input type="text" class="form-control no-padding text-center" id="batch-price">
                                    <span class="input-group-addon pointer" onclick="batchSetAttrs('price')">设置</span>
                                </div>
                            </td>
                            <td align="center">
                                <div class="input-group">
                                    <input type="text" class="form-control no-padding text-center" id="batch-stock">
                                    <span class="input-group-addon pointer" onclick="batchSetAttrs('stock')">设置</span>
                                </div>
                            </td>
                            <td align="center">
                                <div class="input-group">
                                    <input type="text" class="form-control no-padding text-center" id="batch-weight">
                                    <span class="input-group-addon pointer" onclick="batchSetAttrs('weight')">设置</span>
                                </div>
                            </td>
                            <td align="center">
                                <div class="input-group">
                                    <input type="text" class="form-control" id="batch-sn">
                                    <span class="input-group-addon pointer" onclick="batchSetAttrs('sn')">设置</span>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <input type="text" v-show="false" name="attrs[sku]" :value="productSkusStr">
            </div>
        </div>
    </div>
</div>
<style>
[v-cloak] {
    display: none;
}
ul, li {
    list-style: none;
    margin: 0;
    padding: 0;
}
.no-padding {
    padding: 0;
}
.pointer {
    cursor: pointer;
}
.color-disabled {
    color: #999;;
}
.input-group-addon {
    padding: 6px 4px;
}
.tag {
    padding: 2px 10px;
    background-color: #ecf5ff;
    color: #409eff;
    border-radius: 4px;
    border: 1px solid #d9ecff;
    margin: 0 4px;
}
.panel header {
    position: relative;
}
.panel header .header-input {
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.panel-default>.panel-heading {
    color: #333;
    background-color: #f7fafa;
    border-color: #eaeef1;
}
</style>